/* eslint-disable vue/html-indent */
/* eslint-disable vue/html-closing-bracket-newline */
<!--
 * @Description: 字典类型
 * @Author: Liu Zhiwang
 * @Date: 2021-04-09 11:49:17
 * @LastEditTime: 2021-06-08 19:17:00
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="app-container v-flex">
    <filter-form
      :form="listQuery"
      :data="filterData"
      only-query
      @search="search">
      <el-button
        class="refresh-btn"
        size="mini"
        type="primary"
        icon="el-icon-refresh"
        @click="resetListQuery">重置</el-button>
    </filter-form>
    <!-- 表格 -->
    <div ref="main" class="v-flex-elastic">
      <base-table
        :height="height"
        :loading="tableData.loading"
        :data="tableData.tableList"
        :columns="tableData.columns"
        :show-index="tableData.showIndex"
        :show-selection="tableData.showSelection"
        :show-operation="tableData.showOperation"
        :show-filter-column="tableData.showFilterColumn"
        :operaton-width="tableData.operatonWidth"
        :default-operations="tableData.defaultOperations"
        :has-auth="tableData.hasAuth"
        :row-show-color="tableData.rowShowColor">
        <template slot="listStatus" slot-scope="{ row }">
          <div v-if="row.listStatus === 0" class="remain-color">分工</div>
          <div v-else-if="row.listStatus === 1" class="overtime-color">
            调整分工
          </div>
          <div v-else-if="row.listStatus === 2" class="overtime-color">
            调整分工
          </div>
          <div v-else-if="row.listStatus === 3" class="overtime-color">
            已完成
          </div>
        </template>
        <template slot="operations" slot-scope="{ row, $index }">
          <el-button
            size="mini"
            class="td-btn-operation"
            :disabled="row.listStatus == 1 || row.listStatus == 3"
            @click.native="updateForm(row, $index)">销号</el-button>
          <el-button
            size="mini"
            class="td-btn-operation"
            :hidden="row.listStatus == 0"
            @click.native="view(row, $index)">查看</el-button>
        </template>
      </base-table>
    </div>
    <!-- 表格 -->

    <!-- 分页 -->
    <div class="page-box">
      <pagination
        :total="tableData.total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="changePageOption" />
    </div>
    <!-- 分页 -->

    <!-- 新增或编辑弹框 -->
    <DataAddOrEdit :dialog="dialog" @updateData="updateData" />
    <!-- 查看弹框 -->
    <DataLook :dialog="dialog" :dialog-look="dialogLook" />
  </div>
</template>
<script>
import {
  deleteData,
  addOrEditData
} from '@/api/cms/equipment/divceAttr/1CEquipment'
import { getList } from '@/api/cms/equipment/divceAttr/index'
import { getLineList } from '@/api/cms/equipment/divceAttr/index'
import {
  getRailtypeList,
  getPageList
} from '@/api/cms/Analysis-management/Analysis-progress/ProgressReporting'
import { tableMixin } from '@/utils/public'
import { findAllUnitDeptList } from '@/api/platform'
import DataAddOrEdit from './components/2CDataAddOrEdit'
import DataLook from './components/2CDataLook'

import { parseTime } from '@/utils'
export default {
  name: 'Name',
  components: {
    DataAddOrEdit,
    DataLook
  },
  mixins: [tableMixin],
  data() {
    return {
      // 表格高度
      height: 0,

      // 顶部操作栏配置
      filterData: {
        deptId: {
          clearable: false,
          key: 'deptId',
          type: 'select',
          title: '单位',
          placeholder: '请选择单位',
          options: [],
          props: { label: 'deptName', value: 'deptId' }
        },
        lineId: {
          clearable: false,
          key: 'lineId',
          type: 'select',
          title: '线路',
          placeholder: '请选择线路',
          options: [],
          props: { label: 'lineName', value: 'lineId' }
        },
        status: {
          clearable: false,
          key: 'status',
          type: 'select',
          title: '状态',
          placeholder: '请选择状态',
          options: [],
          props: { label: 'lineName', value: 'lineId' }
        },
        startDate: {
          width: 'auto',
          key: 'startDate',
          type: 'date',
          dateType: 'date',
          valueFormat: 'yyyy-MM-dd',
          placeholder: '开始时间'
        },
        endDate: {
          width: 'auto',
          key: 'endDate',
          type: 'date',
          dateType: 'date',
          valueFormat: 'yyyy-MM-dd',
          placeholder: '结束时间'
        }
      },

      // 查询列表请求参数
      listQuery: {
        page: 1,
        size: 20,
        startDate: null,
        endDate: null,
        railType: null,
        typeNo: 'JCJCTYPE01'
      },

      // 统计集合
      counts: {
        totle: '',
        news: '',
        goods: '',
        old: '',
        waste: ''
      },
      // 表格数组
      tableData: {
        loading: false,
        tableList: [],
        total: 0,
        columns: [
          { prop: 'deptName', label: '单位' },
          {
            prop: 'taskDate',
            label: '计划监测日期',
            formatter: (row) => parseTime(row.taskDate, '{y}-{m}-{d}')
          },
          { prop: 'lineName', label: '线路' },
          { prop: 'directionName', label: '行别' },
          { prop: 'startSiteName', label: '计划始站' },
          { prop: 'divceState', label: '计划止站' },
          { prop: 'divceTypeName', label: '实际始站' },
          { prop: 'divceDate', label: '实际止站' },
          { prop: 'jobNum', label: '总工作量（根）' },
          { prop: 'producerName', label: '分析进度' },
          { prop: 'producerName', label: '任务状态' }
        ],
        showIndex: true,
        showSelection: false,
        showOperation: true,
        showFilterColumn: true,
        operatonWidth: '210px',
        defaultOperations: [],
        hasAuth: true,
        rowShowColor: { name: 'name', value: 0 }
      },

      // 添加/编辑弹框
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        dataList: {
          lineList: []
        },
        form: {
          deptList: [], // 使用单位数组
          lineList: []
        },
        rules: {}
      },
      lineList: [],
      // 查看弹框
      dialogLook: {
        visible: false
      },
      // 附件
      fileModal: {
        title: '',
        visible: false,
        id: ''
      },
      deptList: []
    }
  },
  created() {
    this.getListPage()
    this.initPage()
    this.getList()
  },
  activated() {
    this.getListPage()
    // this.getList()
  },
  mounted() { },
  methods: {
    initPage() {
      // 获取单位 deptList
      findAllUnitDeptList({}).then((response) => {
        this.filterData.deptId.options = Object.freeze(response.data)
      })
      // 获取单位
      getList({}).then((response) => {
        this.filterData.producerId.options = Object.freeze(response.data)
      })
      // 获取线路
      getLineList().then((response) => {
        this.filterData.lineId.options = Object.freeze(response.data)
      })
      getRailtypeList().then((response) => {
        this.filterData.railType.options = Object.freeze(response.data)
      })
    },
    // 获取下拉数据、字典
    getList() { },

    // 查询信息列表
    getListPage() {
      this.tableData.loading = true
      getPageList(this.listQuery)
        .then((response) => {
          console.log(response)
          this.tableData.tableList = response.data.records
          this.counts.totle = response.data.total
          this.tableData.total = response.data.total
          this.tableData.loading = false
        })
        .catch(() => {
          this.tableData.loading = false
        })
    },

    // 编辑
    updateForm(row, index) {
      console.log(row)
      console.log('4444444444444')
      this.currentRow = [row]
      const dialog = {
        title: '编辑',
        type: 'edit',
        visible: true,
        disabled: false,
        loading: false,
        dataList: {
          lineList: this.dialog.dataList.lineList
        },
        form: JSON.parse(JSON.stringify(row))
      }
      this.dialog = Object.assign(this.dialog, dialog)
    },

    view(row, index) {
      // 查看
      this.currentRow = [row]
      const dialog = {
        title: '查看',
        type: 'look',
        visible: false,
        disabled: false,
        loading: false,
        form: JSON.parse(JSON.stringify(row))
      }
      this.dialog = Object.assign(this.dialog, dialog)
      this.dialogLook.visible = true
    },

    // 查询
    search() {
      console.log(this.listQuery)
      this.listQuery.page = 1
      this.listQuery.typeNo = 'JCJCTYPE01'
      this.getListPage()
    },

    // 新增或编辑弹框$emit 回调方法
    updateData(formData) {
      console.log(this.dialog.form)
      const param = Object.assign({}, formData)
      addOrEditData(param)
        .then((response) => {
          this.currentRow = [response.data]
          if (this.dialog.type === 'add') {
            this.tableData.tableList.unshift(this.currentRow[0])
            this.tableData.total++
            this.notifiySuccess('添加成功')
            var dialog = this.dialog
            dialog.form.id = response.data.id
            this.dialog = Object.assign(this.dialog, dialog)
          } else {
            const index = this.tableData.tableList.findIndex(
              (item) => item.id === this.currentRow[0].id
            )
            this.tableData.tableList.splice(
              index,
              1,
              JSON.parse(JSON.stringify(this.currentRow[0]))
            )
            this.$forceUpdate()
            this.notifiySuccess('保存成功')
          }
          this.dialog.loading = false
          this.dialog.visible = false
        })
        .catch((_) => {
          this.dialog.loading = false
        })
      this.getListPage()
    },

    // 启用、停用,是否系统
    enable(row, $index) {
      this.rowIndex = $index
      this.updateData(row, 2)
    },

    // 删除
    deleteData(row, index) {
      this.confirmBox(`确定删除这条数据?`)
        .then(() => {
          deleteData(row.id).then((response) => {
            this.notifiySuccess('删除成功!')
            this.getListPage()
          })
        })
        .catch(() => { })
    },

    // 改变分页配置
    changePageOption(data) {
      this.listQuery.page = data.page
      this.listQuery.size = data.size
      this.getListPage()
    },

    // 重置查询
    resetListQuery() {
      this.listQuery = {
        page: 1,
        size: 20,
        typeNo: 'JCJCTYPE01'
      }
      this.getListPage()
    }
  }
}
</script>
<style scoped lang="scss">
.content-header {
  height: 36px;
  display: flex;
  align-items: center;
  .content-header-vertical-bar {
    width: 7px;
    height: 26px;
    background: #409eff;
    border-radius: 4px;
    margin-right: 13px;
  }
  .content-header-title {
    font-size: 28px;
    margin-right: 30px;
  }
  .content-msg {
    width: 162px;
    height: 28px;
    margin-right: 18px;
    line-height: 26px;
    color: #323232;
    font-size: 14px;
    text-align: center;
    background: #f7fbff;
    border: 1px solid #e3e3e3;
    border-radius: 14px;
    span {
      color: #f44b53;
      font-size: 16px;
    }
  }
  .operation-btn-div {
    position: absolute;
    right: 28px;
    .operation-btn {
      padding: 10px 20px 10px 20px;
      margin-left: 11px;
      color: #2d6dd4;
      background-color: #e2f0fd;
      border-radius: 4px;
      border: none;
    }
    .operation-btn:hover {
      padding: 10px 20px 10px 20px;
      margin-left: 11px;
      color: #2d6dd4;
      background-color: #b0d1f0;
      border-radius: 4px;
      border: none;
    }
  }
}
</style>

